<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link href="http://cdn.bootcss.com/Swiper/3.4.0/css/swiper.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/animate.css/3.2.6/animate.min.css" rel="stylesheet">
    <title>商品详情</title>
</head>
<style>
    header,
    .header1 { background: #F8F8F8; height: 1.95rem; position: absolute; z-index: 8; top: 0; left: 0; right: 0; bottom: auto; border-bottom: solid 0.05rem #EEE; }
    header1.fixed { position: fixed; background: rgba(248,248,248,0.95); z-index: 9;}
    .header-wrap { display: block; max-width: 320px; max-width: 640px; margin: 0 auto; text-align: center; }
    .header-l { display: block; width: 1.95rem; height: 1.95rem; position: absolute; top: 0; left: 0; }
    .header-l a { position: relative; z-index: 1; display: inline-block; width: 1rem; height: 1rem; padding: 0.4775rem; }
    .header-l a i { display: block; width: 100%; height: 100%; }
    .header-l a i.back { width: 80%; height: 80%; margin: 10%; background-image: url(../images/arrow_left_b.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: 100%; opacity: 0.75; }
    .header-l a i.close { width: 80%; height: 80%; margin: 10%; background-image: url(../images/close_window.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: 100%; opacity: 0.75; }
    .header-l a i.set { background-image: url(../images/set_b.png); background-position: 50% 50%; background-repeat: no-repeat; background-size: 100%; opacity: 0.65; }
    .header-l a i.home { width: 80%; height: 80%; margin: 10%; background-image: url(../images/home_b.png); background-repeat: no-repeat; background-position: 50% 50%; background-size: 90%; opacity: 0.7; }
    /*单一标题*/
    .header-title { display: inline-block; margin: 0 auto; }
    .header-title h1 { font-size: 0.8rem; line-height: 1rem; height: 1rem; }
    p,li,ul,h3,body{
        margin: 0;
        padding: 0;
        list-style: none;
        font-family: '微软雅黑';
    }
    a{
        margin: 0;
        padding: 0;
        text-decoration: none;
    }
    html, body {

        font-size: 20px;

    }

    .pageone  .goodsName{
        padding: 0px 15px;
        font-size: 0.7rem;

    }
    .pageone  .goodsNum{
        padding: 10px 10px;
        font-size: 0.9rem;
        color: #dc0000;
    }
    .showpText p:first-child{
        float: left;
        font-size: 0.65rem;
        color: #777777;

    }
    .showpText p:first-child span{
        color: #e93c55;
    }
    .showpText{padding: 0 10px; overflow: hidden;}
    .showpText p:last-child{
        float: right;
        color: #777777;
        font-size: 0.65rem;
    }
    .showpMian{
        overflow: hidden;
        background: #ffffff;
        width: 96%;
        margin: 0 2% ;
        padding-bottom: 20px;
        border-bottom: 2px solid #cfcfcf;
    }
    .goodsM{
        padding:8px 10px;
        overflow: hidden;
    }

    .goodsM li{
        width: 50%;
        float: left;
        text-align: center;
        line-height: 2.25rem;
    }

    .goodsM li:first-child a{
        display: block;
        background: #e93c55;
        color: #ffffff;
    }

    .goodsM li:last-child a{
        display: block;
        background: #fe6d82;
        color: #ffffff;
    }
    .goodsShowpHeader .ionc,.listNav .ionc{
        overflow: hidden;
    }

    .goodsShowpHeader .ionc li,.listNav .ionc li{
        width: 12.5%;
        height: 40px;
        float: right;
    }
    .listNav .ionc li{
        height: 45px;
    }

    .listNav .ionc li:first-child a{
        display: block;
        height:45px;
        width: 35px;
        overflow: hidden;
        background: url("../images/ionc2.png") no-repeat -148px -65px;
        background-size: 512px;
    }

    .listNav .ionc li:nth-child(3) a{
        display: block;
        height:45px;
        width: 35px;
        overflow: hidden;
        background: url("../images/ionc2.png") no-repeat -56px -65px;
        background-size: 512px;
    }

    .listNav .ionc li:nth-child(2) a{
        display: block;
        height:45px;
        width: 35px;
        overflow: hidden;
        background: url("../images/ionc2.png") no-repeat -101px -65px;
        background-size: 512px;
    }

    .listNav .ionc li:last-child a{
        display: block;
        height:45px;
        width: 35px;
        overflow: hidden;
        background: url("../images/ionc2.png") no-repeat -11px -65px;
        background-size: 512px;
    }
    .goodsShowpHeader .ionc li:first-child a{
        display: block;
        height:40px;
        width: 30px;
        overflow: hidden;
        background: url("../images/ionc2.png") no-repeat -185px -3px;
        background-size: 512px;
    }

    .goodsShowpHeader .ionc li:nth-child(2) a{
        display: block;
        height:40px;
        width: 30px;
        overflow: hidden;
        background: url("../images/ionc2.png") no-repeat -138px -3px;
        background-size: 512px;
    }

    .goodsShowpHeader .ionc li:last-child a{
        display: block;
        height:40px;
        width: 30px;
        overflow: hidden;
        background: url("../images/ionc2.png") no-repeat -90px -3px;
        background-size: 512px;
    }
    .footer{
        position: absolute;
        z-index: 2;
        top: 100%;
        margin-top: -221px;
        width: 100%;
    }
    body,html{width: 100%;height:100%;  overflow: hidden;}
    .pageone{
        position: relative;
        height: 100%;
        width: 100%;

        overflow: hidden;
    }
    .headerMain{
        position: absolute;
        bottom: 0;
        z-index: 2;
        background: #ffffff;
        width: 100%;
    }
    .header{
        height:100%;

        margin: 0 auto;
        padding-top: 10%;
        box-sizing: border-box;
    }
    .swiper-slide img{
        width: 100%;
    }
    .page2{
        background: #ffffff;
        position: absolute;
        top:0;
        /*z-index: 6;*/
        display: none;
        width: 100%;
        /*overflow: auto;*/
    }
    .goodsShowp{
        background: #ffffff;
        height: 200px;
        position: absolute;
        bottom: 0px;
        z-index: 222;
        width: 92%;
        margin:0px 4%;
    }
    .goodsShowpHeader .ionc,.listNav .ionc{
        overflow: hidden;
    }

    .goodsShowpHeader .ionc li,.listNav .ionc li{
        width: 12.5%;
        height: 40px;
        float: right;
    }
    .listNav .ionc li{
        height: 45px;
    }
    .goodsFooterShowp {
        height: 80px;
        position: static;
        padding: 20px 0px;
    }
    .page2 .goodsName {
        font-size: 0.7rem;

    }
    .page2 .goodsNum {
        padding: 10px 0;
        font-size: 0.9rem;
        color: red;
    }
    .page2 .showpText {
        padding: 0 ;
        overflow: hidden;

    }
    .page2 .showpText p{
        font-size: 0.65rem;
    }
    .page2 .selectNav {
        width: 92%;
        margin: 10px 4%;
        overflow: hidden;
        box-sizing: border-box;
    }
    .page2 .selectNav li:first-child{
        border-top: 1px solid #cccccc;
    }
    .page2 .selectNav li {
        position: relative;
        background: #ffffff;
        margin: 5px 0;
        overflow: hidden;
        font-size: 0.7rem;
        padding: 0;
        border-bottom: 1px solid #cccccc;
    }
    .selectNav li p {
        line-height: 30px;
        float: left;
        color: #010101;
        font-size: 0.7rem;
    }
    .selectNav li .ofset{
        float: right;
    }
    .page2 .goodsInfoText {
        background: white;
        width: 92%;
        margin: 4%;
    }
    .goodsInfo{
        width: 92%;
        margin: 10px 4%   ;
    }
    .goodsInfo img{
        width: 100%;
        margin-top: 10px;
    }
    h3 {
        width: 100%;
        line-height: 30px;
        padding-top: 5px;
        font-size: 0.8rem;
    }
    h3:after {
        content: '';
        margin: 5px 0 5px 0;
        width: 100%;
        display: block;
        height: 1px;
        background: #777777;
        -webkit-transform: scaleY(.5);
        -ms-transform: scaleY(.5);
        -o-transform: scaleY(.5);
        transform: scaleY(.5);
    }
    .goodsInfoText li {
        color: #969696;
    }
    .goodsInfoText li span {
        color: #000000;
    }

    .goodsInfoText li {
        line-height: 1.2rem;
        font-size: 0.8rem;
    }
    .page2 .dianputuijian{
        width: 92%;
        margin:10px 4%;
    }
    #good_list{
        overflow: hidden;
    }
    #good_list li{
        float: left;
        width: 25% !important;
    }
    #good_list li a {
         color: #666;
    }
     #good_list li img{
        margin:0 auto;
        width: 70px;
        height: 68px;
        display: block;
    }
    #good_list li p{
        white-space:nowrap;
        text-overflow:ellipsis;
        -o-text-overflow:ellipsis;
        overflow:hidden;
        margin: 3px auto;
        width: 70px;
        font-size: 0.6rem;
    }
     #good_list li p:last-child{
        color: red;
    }
    .buy{
        position: relative;
        width: 100%;
        height: 100%;
        z-index: 10;
        background: rgba(0,0,0,.7);
        overflow:hidden;
        display: none;
    }
    .buy1 {
        background: #ffffff;
        width: 100%;
        bottom: 0;
        position: absolute;
        font-size: 15px;
    }
    .buy1 .buy_top {
        width: 100%;
        position: relative;
        border-bottom: 1px solid #cccccc;
        padding-bottom: 90px;
    }
    .buy1 .pic {
        position: absolute;
        border: 1px solid #cccccc;
        width: 100px;
        height: 100px;
        margin-left: 10px;
        top:-20px;
    }
    .buy1 .pic img{
        width: 100%;
    }
    .buy1 .buy_top ul{
        position: absolute;
        left: 126px;
        top:8px;
        padding-right: 10px;
    }
    .buy1 ul li{
        font-size: 0.65rem;
        line-height: 22px;
    }
    .buy1 ul li:last-child{
        margin-top: 10px;
        color: red;
    }
    .buy1 ul li:last-child span{
        float: right;
        color: #888;
    }

    .buy_bot{
        padding-left: 20px;
        position: relative;
        top:20px;
    }
    .queding{
        position: relative;
        /*top:430px;*/
        width: 90%;
        margin: 40px 5% 10px;
        background:  rgb(254,109,130);
        text-align: center;
        padding: 10px 0;
        color: white;
        font-family: '微软雅黑'
    }
    .one{
        overflow: hidden;
        margin-bottom: 15px;
    }
    .one span{
        display: inline-block;
    }
    .one .listone{
        margin-left: -18px;
    }
    .one .ulone{
        overflow: hidden;
    }
    .one .ulone li{
        float: left;
        margin-left: 18px;
        margin-top: 10px;
        padding: 2px;
        border-radius: 4px;
        height: 36px;
        box-sizing: border-box;
    }
    .one .ulone li img{
        width: 30px;
        height: 30px;
        box-sizing: border-box;
        float: left;
    }
    .one .listone .ulone .activeimg{
        border: 1px solid #cccccc;
        background:rgb(254,109,130) ;
    }
    .one .ultwo{
        padding-right: 10px;
    }
    .one .ultwo li{
        font-size: 0.65rem;
        float: left;
        margin-left: 16px;
        margin-top: 10px;
        padding: 2px 12px;
        background: rgb(245,245,245);
    }
    .two{
        margin-top: 12px;
    }
    .two .listtwo{
        overflow: hidden;
        margin-left: -15px;
    }
    .two .listtwo p{
        background:rgb(245,245,245);
        float: left;
        padding: 3px 20px;
        margin-left: 15px;
        margin-top: 10px;
    }
    .one .listone .active{
        background:rgb(254,109,130) ;
        color: #ffffff;
    }

    .two .listtwo .active{
        background:rgb(254,109,130) ;
        color: #ffffff;
    }
    .num{
        position: relative;
        margin-top: 15px;
    }
    .num  p{
        margin-left: -10px;
        margin-top: 10px;
    }
    .num  p span{
        padding: 3px 16px;
        margin-left: 10px;
        background:rgb(245,245,245);
    }

    #mcover {
                    position: fixed;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background: rgba(0, 0, 0, 0.7);
                    display: none;
                    z-index: 20000;
                }

                #mcover img {
                    position: fixed;
                    right: 18px;
                    top: 5px;
                    width: 260px;
                    height: 180px;
                    z-index: 20001;
                }
    @media screen and (max-width: 320px) {
        /*.buy{*/
        /*padding-top: 26%;*/
        /*}*/
        /*.queding{*/
        /*top:430px*/
        /*}*/
    }

</style>
<style>
    .car_count { width:10px; height:10px; text-align:center; line-height:10px; border-radius:7.5px; font-size:12px; color:#ff6600; border:1px solid #ff6600; position: absolute; right:2px; top:5px;}
    .code_tips { width: 200px; height: 30px; background: rgba(0,0,0,.5); opacity: 0; position: fixed; bottom: 100px; left: 50%; margin-left:-100px; color: #fff; text-align: center; font-size: 15px; line-height: 30px; border-radius: 5px; z-index:99;}
</style>
<body>
<header id="header1" class="fixed">
    <div class="header-wrap">
        <div class="header-l">
            <a href="javascript:history.go(-1)">
                <i class="back"></i>
            </a>
        </div>
        <div class="header-title">
            <h1>商品详情</h1>
        </div>
    </div>
</header>
<div class="pageone animated">
    <div class="header" id="header" style="">
        <a class="history" onclick="history.go(-1)" href="##"></a>
        <div class="swiper-container" style="">
            <div class="swiper-wrapper" id="imgsPaly">

            </div>
            <!-- Add Pagination -->
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="headerMain animated">
        <div class="showpMian" id="g_name_header_tpl">

        </div>
        <div class="goodsM">
            <ul>
                <li><a href="##" onclick="addCar()">加入购物车</a></li>
                <li class="shop"><a href="##">立即购买</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="page2 animated" style="overflow: hidden">
    <div style="height:40px;"></div>
    <div class="goodsShowp goodsFooterShowp" id="g_name_p_html">

    </div>
    <div class="selectNav">
        <ul id="goods_eva">

        </ul>
    </div>
    <!--good_list-->
    <div class="goodsInfo" id='details-info'>

    </div>
    <div class="goodsInfo">
        <h3>店铺推荐</h3>
        <ul id='good_list'>
        </ul>
    </div>
    <div class="goodsM">
        <ul>
            <li><a href="javascript:void(0)" onclick="addCar()">加入购物车</a></li>
            <li class="shop"><a href="##">立即购买</a></li>
        </ul>
    </div>
</div>
<div class="buy" style="display: ;position: fixed;z-index: 10;top: 0;">
    <div class="buy1">
    </div>
</div>
<div id="mcover" onclick="document.getElementById('mcover').style.display='';"><img src="../images/guide.png">
        </div>
</body>
<script type="text/html" id="image_tpl">
    <% for (var i =0;i<goods_image.length;i++){ %>
    <div class="swiper-slide"> <img src="<%= goods_image[i] %>" alt=""></div>
    <% } %>
</script>
<script type="text/html" id="goods_tmpl">
    <div class="goodsShowpHeader">
        <ul class="ionc">
            <li><a href="JavaScript:void()" onclick="document.getElementById('mcover').style.display='block';"></a></li>
            <li style="position: relative;"><a href="cart_list.html"></a><b class="car_count">1</b></li>
            <li><a href="member/chat_info.html?goods_id=<%= goods_info['goods_id']%>&t_id=1"></a></li>
        </ul>
    </div>
    <p class="goodsName"><%= goods_info['goods_name']%></p>
    <p class="goodsNum"><%= goods_info['goods_price']%></p>
    <div class="showpText">
        <p>送至 <%=goods_hair_info.area_name%> <span><%=goods_hair_info.if_store_cn%></span> <%=goods_hair_info.content%></p>
        <p>销量: <span><%= goods_info['goods_salenum']%>件</span></p>
    </div>
    </div>
</script>
<script type="text/html" id="goods2_tmpl">
    <p class="goodsName"><%= goods_info['goods_name']%></p>
    <p class="goodsNum">￥<%= goods_info['goods_price']%></p>
    <div class="showpText">
        <p>送至 <%=goods_hair_info.area_name%> <span><%=goods_hair_info.if_store_cn%></span> <%=goods_hair_info.content%></p>
        <p>销量: <span><%= goods_info['goods_salenum']%>件</span></p>
    </div>
</script>
<script type="text/html" id="goods_list">
    <% for(var i in goods_commend_list) { %>
    <li>
        <a href="shop_details.html?goods_id=<%=goods_commend_list[i]['goods_id']%>">
            <img src="<%=goods_commend_list[i]['goods_image_url']%>" alt=""/>
            <p><%=goods_commend_list[i]['goods_name']%></p>
            <p><%=goods_commend_list[i]['goods_price']%></p>
        </a>
    </li>
    <% } %>
</script>
<script type="text/html" id="buy_tpl">
    <div class="buy1">
        <div class="buy_top" id="buy">
            <p class="pic"><img  style="" src="<%= goods_image[0] %>" alt=""/></p>
            <ul>
                <!--<li style="color: rgb(220,0,0);font-size: 20px">￥<%= goods_info['goods_name']%>-->
                <!--<li style="color: rgb(220,0,0);font-size: 20px">￥<%= goods_info['goods_price']%>-->
                <!--<li style="font-size: 12px">库存 <span><%= goods_info['goods_storage']%></span> 件-->
                <li><%= goods_info['goods_name']%></li>
                <li>￥ <em><%= goods_info['goods_price']%></em> <span>库存：<%= goods_info['goods_storage']%>件</span></li>
            </ul>
        </div>
        <div class="buy_bot">
            <% if(goods_map_spec.length>0){%>
            <% for(var i =0;i<goods_map_spec.length;i++){%>
            <div class="one">
                <span><%=goods_map_spec[i].goods_spec_name%>：</span>
                <div class="listone">
                    <ul class="ultwo">
                        <%for(var j = 0;j<goods_map_spec[i].goods_spec_value.length;j++){%>
                        <li <%if (goods_info.goods_spec[goods_map_spec[i].goods_spec_value[j].specs_value_id]){%> class="activeimg active" <%} %> specs_value_id = "<%=goods_map_spec[i].goods_spec_value[j].specs_value_id %>" ><%=goods_map_spec[i].goods_spec_value[j].specs_value_name%></li>
                        <%}%>
                    </ul>
                </div>
            </div>
            <%}%>
            <%}%>
            <div class="num">
                数量<p><span class="jian" onclick="movenum()">-</span><span class="shuliang">1</span><span class="jia" onclick="add()">+</span></p>
            </div>
        </div>
        <div class="queding" onclick="buyNow()">
            确定
        </div>
    </div>
</script>
<script type="text/html" id="goods_evel">
    <li>
        <a href="product_eval_list.html?goods_id=<%=goods_info['goods_id']%>">
            <p class="left">商品评价 <span>好评率 <%=goods_evaluate_info.good_percent%>%</span></p>
            <i></i>
            <p class="ofset"><%=goods_info.evaluation_count%>人评价</p>
        </a>
    </li>
    <li>
        <p><%=store_info['store_name']%> <span><% if(store_info['is_own_shop']==1) { %>自营<% }else { %>普通商家<% }%></span></p>
        <i></i>
    </li>

</script>
<script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
<script src="http://cdn.bootcss.com/Swiper/3.4.0/js/swiper.min.js"></script>
<script type="text/javascript" src="../js/config.js"></script>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/startmove.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/template.js"></script>
<script type="text/javascript" src="../js/swipe.js"></script>
<script type="text/javascript" src="../js/simple-plugin.js"></script>
<script type="text/javascript" src="../js/tmpl/shop_details.js"></script>
<script>
//    var page2 = $('.page2').height();
//    $('.page2').height(page2);
//    var swiper = new Swiper('.swiper-container');
    function a() {
        $(document).on('touchstart', function (ev) {
            var ev = ev || event;

            var startY = event.changedTouches[0].clientY;
            $(document).on('touchmove', function (ev) {
                var ev = ev || event;

                if (startY - event.changedTouches[0].clientY > 50) {
                    $('.pageone').addClass('zoomOutUp');
                    $('.page2').addClass('zoomInUp').css('display','block')
                    $('.page2').removeClass('zoomOutUp');
                    $('.pageone').removeClass('zoomInUp');
                }
                if (event.changedTouches[0].clientY - startY > 50) {
                    if($(window).scrollTop()==0) {
                        $('.page2').addClass('zoomOutUp');
                        $('.pageone').addClass('zoomInUp').css('display','block');
                        $('.pageone').removeClass('zoomOutUp');
                        $('.page2').removeClass('zoomInUp')
                    }
                }
            });
            $(document).on('touchend', function () {
                $(this).unbind("touchmove");

            });
        });
    }
    a();


    function movenum() {
        var num=$('.shuliang').html()
        if($('.shuliang').html()<2){
            $('.shuliang').html()==1
        }else{
            $('.shuliang').html(--num);
        }
    }
    function add() {
        var num=$('.shuliang').html()
        if($('.shuliang').html()>999){
            $('.shuliang').html()==10
        }else{
            $('.shuliang').html(++num);
        }
    }
    $('.shop').on('touchstart',function(ev){

        $('.buy').fadeIn(200)
        $('.buy').find('.buy1').animate({
            bottom:0
        },800)
        return false
    })

    function selectThis(obj){
        var partL = obj.parentNode.getElementsByTagName('span');
        for (var i=0;i<partL.length;i++){
            partL[i].className = '';
        }
        obj.className = "active";
    }

    $('.buy').on('touchstart',function(ev){
        var ev=ev||event;
        ev.stopPropagation()
        $(this).fadeOut(200);
        $(this).find('.buy1').animate({
            bottom:-800,
        },800)

    })
    $('.ulone li').on("touchstart", function () {
        $(this).addClass('activeimg').siblings().removeClass('activeimg')

    })
    $('.listtwo p').on('touchstart',function(){
        $(this).addClass('active').siblings().removeClass('active')
    })
    $('.ultwo li').on('touchstart',function(){
        $(this).addClass('active').siblings().removeClass('active')
    })
    $('.buy1').on('touchstart',function(ev){
        var ev=ev||event;
        ev.stopPropagation();

    })

</script>
</html>